<template>
    <div>

        <!-- 导航栏 -->
        <van-nav-bar
            title="购物车"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        >
            <template #right>
                <div @click="Empty()">
                    清空
                </div>
            </template>
        </van-nav-bar>

        <!-- 选中：全选/全不选 -->
        <van-checkbox-group v-model="result" ref="checkboxGroup">
            <van-row v-for="item in $store.state.cartlist" :key="item.id">
                <van-col span="4">
                    <van-checkbox :name="item" @click="check"></van-checkbox>
                </van-col>
                <van-col span="20">
                    <!-- 滑动单元格 -->
                    <van-swipe-cell>
                        <van-card
                            :price="item.price | filprice"
                            :desc="item.desc"
                            :title="item.title"
                            :thumb="item.img"
                            >
                            <template #num>
                                <van-stepper 
                                    v-model="item.num" 
                                    theme="round" 
                                    button-size="22" 
                                    disable-input 
                                    @plus="max(item.id)"
                                    @minus="min(item.id)"
                                    />
                            </template>
                        </van-card>   
                        <template #right>
                            <van-button 
                                square 
                                text="删除" 
                                type="danger" 
                                class="delete-button" 
                                @click="remove(item.id)"
                            />
                        </template>
                    </van-swipe-cell>
                </van-col>
            </van-row>
        </van-checkbox-group>

        <div class="price">总数：{{allTotal}}</div>
 
        <van-submit-bar :price="allprice*100" button-text="提交订单">
            <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
        </van-submit-bar>
        
    </div>
</template>

<script>
import { Dialog } from 'vant';

export default {
    data() {
        return {
            result:[],
            checked:false,
        }
    },
    methods: {
        // 步进器 ++
        max(id){
            this.$store.commit("max",id);
        },
        // 步进器 --
        min(id){
            this.$store.commit("min",id);
        },
        // 点击 删除
        remove(id){
            this.$store.commit("remove",id);
        },
        // 点击 复选框 选中
        check(){
            if(this.$store.state.cartlist.length == this.result.length){
                this.checked = true;
            }else{
                this.checked = false;
            }
        },
        // 全选/取消全选
        checkAll(){
            this.$refs.checkboxGroup.toggleAll(this.checked);
        },
        // 返回上一级
        onClickLeft(){
            this.$router.go(-1);
        },
        // 清空购物车
        Empty(){
            Dialog.confirm({
                title: '标题',
                message: '是否确认清空？',
            })
            .then(() => {
                localStorage.removeItem("vuex");
                this.$store.state.cartlist = [];
            })
            .catch(() => {
                // on cancel
            });
        }
    },
    computed: {
        // 选中 总价
        allprice(){
            var price = 0;
            this.result.forEach((item) => {
                price += item.num * item.price;
            });
            return price;
        },
        // 选中 总数
        allTotal(){
            var total = 0;
            this.result.forEach((item) => {
                total += item.num;
            });
            return total;
        }
    },
    // 过滤器
    filters:{
        // 过滤时间
        filprice(num){
            return num.toFixed(2);
        }
    }
}
</script>

<style lang="scss">
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}

.van-col{
    .van-checkbox{
        margin-left:15px;
        margin-top:40px;
    }
}
.price{
    margin:15px;
}
.van-submit-bar{
    position: fixed;
    left: 0;
    bottom: 12vh;
    // border:1px solid red;
}

</style>